<template>
  <div class="px-4 h-full overflow-hidden">
    <div class="flex justify-between items-center py-2">
      <a-input-search v-model:value="searchKey" class="w-64" placeholder="姓名/助记码/住院号/床位号" @search="getData" />
      <a-button @click="open = true">导出</a-button>
    </div>
    <BaseTable column-code="000101" :loading="loading" :scroll="{ x: 2300 }" :data-source="tableData" fill>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'xh'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex === 'chargeStatus'">
          <a-tag v-if="record.chargeStatus === 0" color="blue">未结账</a-tag>
          <a-tag v-else color="green">已结账</a-tag>
        </template>
        <template v-if="column.dataIndex === 'dischargeDate'">
          {{ record.inpDischarge?.dischargeDate }}
        </template>
        <template v-if="column.dataIndex === 'brName'">
          <InPatientPopover v-model:open="record.openPopover" :patient-info="record" @change="getData" @click="record.openPopover = !record.openPopover">
            <div class="cursor-pointer text-primary hover:underline">{{ record.brName }}</div>
          </InPatientPopover>
        </template>
      </template>
    </BaseTable>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import BaseTable from '@/components/BaseTable'
import InPatientPopover from '@/components/InPatientPopover'
import useStore from '../../store'

const store = useStore()
const searchKey = ref('')
const { loading, tableData, getData } = useTable({
  url: '/inp/zydj/getInpRecordList',
  immediate: true,
  pagination: false,
  formatParams: () => {
    return {
      status: store.tabsKey, //待出院状态标识
      bqbh: store.areaCode,
      pyjm: searchKey.value
    }
  },
  onSuccess: () => {
    tableData.value.forEach((item) => (item.openPopover = false))
  }
})
</script>
